1 <?php include 'includes/header.php'; ?>
2 <div class="col-md-6">
3 <div class="panel panel-default">
4 <div class="panel-heading">
5 Expance & Cash Collection Chart: Last 7 days
6 </div>
7 <div class="panel-body">
8 <canvas id="myChart">
9
10 </canvas>
11 </div>
12 </div>
13 </div>
14 <div class="col-md-6">
15 <div class="panel panel-default">
16 <div class="panel-heading">
17 Monthly Bill Collection : 2017
18 </div>
19 <div class="panel-body">
20 <canvas id="chart2">
21
22 </canvas>
23 </div>
24 </div>
25 </div>
26
27 <div class="col-md-6">
28 <div class="panel panel-default">
29 <div class="panel-heading">
30 Product Stock
31 </div>
32 <div class="panel-body">
33 <canvas id="myChart2">
34
35 </canvas>
36 </div>
37 </div>
38 </div>
39
40 <?php include 'includes/footer.php'; ?>
41 <script type="text/javascript">
42 var ctx = document.getElementById('myChart').getContext('2d');
43 var myChart = new Chart(ctx, {
44 type: 'bar',
45 data: {
46 labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
47 datasets: [{
48 label: 'Cash Collection',
49 data: [12, 19, 3, 17, 6, 3, 7],
50 backgroundColor: "rgba(153,255,51,0.6)"
51 }, {
52 label: 'Expance',
53 data: [2, 29, 5, 5, 2, 3, 10],
54 backgroundColor: "rgba(245,0,0,0.6)"
55 }]
56 }
57 });
58 var ctx = document.getElementById('chart2').getContext('2d');
59 var myChart = new Chart(ctx, {
60 type: 'bar',
61 data: {
62 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
63 datasets: [{
64 label: 'Monthly Bill Collection',
65 data: [50000, 60000, 30000, 45000, 48000, 38000, 80000, 20000, 0],
66 backgroundColor: "rgba(0,255,51,0.6)"
67 }]
68 }
69 });
70 </script>
71 <script type="text/javascript">
72 $(document).ready(function() {
73 $.ajax({
74 url: "chart.php",
75 method: "GET",
76 dataType: 'JSON',
77 success: function(data) {
78 console.log(data);
79 var raw = [];
80 var qty = [];
81
82 for (var i in data) {
83 raw.push(data[i].name);
84 qty.push(data[i].quantity);
85 }
86 console.log(raw);
87 console.log(qty);
88 var chartdata = {
89 labels: raw,
90 datasets: [{
91 label: 'Product Stock',
92 backgroundColor: 'rgba(0,200,225,.5)',
93 borderColor: 'rgba(200, 200, 200, 0.75)',
94 hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
95 hoverBorderColor: 'rgba(200, 200, 200, 1)',
96 data: qty
97 }]
98 };
99
100 var ctx = $('#myChart2');
101
102 var barGraph = new Chart(ctx, {
103 type: 'bar',
104 data: chartdata
105 // options: {
106 // scales: {
107 // yAxes: [{
108 // ticks: {
109 // // Create scientific notation labels
110 // callback: function(value, index, values) {
111 // return value.toExponential();
112 // }
113 // }
114 // }]
115 // }
116 // }
117 });
118 },
119 error: function(data) {
120 console.log(data);
121 }
122 });
123 });
124
125 </script>
